<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/public.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/agora-rtm-sdk-1.4.3.js"></script>
    <script src="/js/dream-msg.min.js"></script>
    <script src="/js/public.js"></script>
    <script src="/js/AgoraRTC_N-4.7.3.js"></script>
    <script src="/js/FileSaver.min.js"></script>
    <title>Document</title>
  </head>

  <body>
    <!--上课界面-->
    <section class="section-interface" id="section-interface">
      <!--老师头像框 waiting-->
      <div class="interface-student-profile">
        <!--老师头像框 正在等待中-->
        <div class="student-profile-waiting-wrap">
          <!-- <img
            class="student-profile-waiting"
            width="84"
            height="84"
            src="/static/anquan.png"
            alt="student_img"
          /> -->
          <span class="student-profile-waiting-text">...</span>
        </div>
        <!--老师头像框 标题-->
        <div class="student-profile-title">等待学生加入</div>
      </div>
      <div class="share-screen-text">共享屏幕</div>
      <!--老师链接-->
      <div id="interface-teacher-join"></div>
      <!--学生头像-->
      <div class="interface-teacher-profile">
        <!--学生头像 容器-->
        <div id="interface-teacher-profile-content" class="interface-teacher-profile-content">

        </div>
      </div>
      <div class="interface-teacher-detail-show">
        <i class="iconfont icon-zuoyoujiantou" title="展开"></i>
      </div>
    </section>
    <!--老师课程记录详情-->
    <section class="section-course_history-detail">
      <!--老师课程记录 导航栏-->
      <nav class="detail-nav">
        <div class="detail-nav-cut">
          <i class="iconfont icon-zuoyoujiantou" title="收起"></i>
        </div>
        <!--老师课程记录 导航栏 标题-->
        <h1 class="detail-nav-title"></h1>
        <!--老师课程记录 导航栏 菜单-->
        <ul class="detail-nav-menu">
          <li class="detail-nav-menu-li detail-nav-menu-li-active" data-index='1'>
            <div class="detail-nav-menu-img ">
              <i class="iconfont icon-kechengjilu"></i>
            </div>
            <div class="detail-nav-menu-title">课程记录</div>
          </li>
          <li class="detail-nav-menu-li detail-nav-menu-li-deactive" data-index='2'>
            <div class="detail-nav-menu-img ">
              <i class="iconfont icon-a-wenjianjiawenjian"></i>
            </div>
            <div class="detail-nav-menu-title">文件</div>
          </li>
          <li class="detail-nav-menu-li detail-nav-menu-li-deactive" data-index='3'>
            <div class="detail-nav-menu-img ">
              <i class="iconfont icon-xinxi1"></i>
            </div>
            <div class="detail-nav-menu-title">信息</div>
          </li>
        </ul>
      </nav>
    </section>
    <input type="file" accept="image/*" class="uploads-img" style="display: none;">
    <input type="file" accept=".rar,.gzip,.gz" class="uploads-file-input" style="display: none;">
    <!-- Code injected by live-server -->
    <script type="text/javascript">
      // <![CDATA[  <-- For SVG support
      if ("WebSocket" in window) {
        (function () {
          function refreshCSS() {
            var sheets = [].slice.call(document.getElementsByTagName("link"));
            var head = document.getElementsByTagName("head")[0];
            for (var i = 0; i < sheets.length; ++i) {
              var elem = sheets[i];
              var parent = elem.parentElement || head;
              parent.removeChild(elem);
              var rel = elem.rel;
              if (
                (elem.href && typeof rel != "string") ||
                rel.length == 0 ||
                rel.toLowerCase() == "stylesheet"
              ) {
                var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, "");
                elem.href =
                  url +
                  (url.indexOf("?") >= 0 ? "&" : "?") +
                  "_cacheOverride=" +
                  new Date().valueOf();
              }
              parent.appendChild(elem);
            }
          }
          var protocol =
            window.location.protocol === "http:" ? "ws://" : "wss://";
          var address =
            protocol + window.location.host + window.location.pathname + "/ws";
          var socket = new WebSocket(address);
          socket.onmessage = function (msg) {
            if (msg.data == "reload") window.location.reload();
            else if (msg.data == "refreshcss") refreshCSS();
          };
          if (
            sessionStorage &&
            !sessionStorage.getItem("IsThisFirstTime_Log_From_LiveServer")
          ) {
            console.log("Live reload enabled.");
            sessionStorage.setItem("IsThisFirstTime_Log_From_LiveServer", true);
          }
        })();
      } else {
        console.error(
          "Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading."
        );
      }
      // ]]>
    </script>
  </body>
  <style>
    @import url("./css/history.css");
    @import url("./css/file.css");
    @import url("./css/message.css");
    @import url('/css/loading.css');
    @media screen and (max-width: 1200px) {
      .section-interface {
        width: 100%;
        position: relative;
      }

      .section-course_history-detail {
        display: none !important;
      }
    }



    body {
      background-color: #f9f9f9;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      position: relative;
    }

    section {
      width: 50%;
      height: 100%;
    }

    .section-interface {
      background-color: white;
      height: 100vh;
      transform: .3s;
      position: relative;
    }

    .interface-student-profile {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .student-profile-waiting-wrap {
      position: relative;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      background: rgba(0,0,0,0.5);
    }

    .student-profile-waiting {
      background: #949494;
      opacity: 0.49;
      border-radius: 50%;
      user-select: none;
    }

    .detail-nav-cut{
      margin-left: 33px;
      cursor: pointer;
    }

    .share-screen-text{
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;
      z-index: 20;
      font-weight: bold;
      cursor: pointer;
    }

    .student-profile-waiting-text {
      position: absolute;
      user-select: none;
      left: 0;
      top: -38px;
      bottom: 0;
      right: 0;
      display: flex;
      margin: auto;
      color: white;
      align-items: center;
      justify-content: center;
      font-size: 70px;
    }

    .student-profile-title {
      font-size: 18px;
      font-weight: bold;
      color: #3f3f3f;
      margin-top: 14px;
    }

    #interface-teacher-join{
      height: 100%;
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .interface-teacher-profile {
      height: 50%;
      display: flex;
      align-items: flex-end;
      position: absolute;
      bottom: 0;
    }

    .player{
      height: 100%;
    }

    .player-content{
      height: 100%;
    }

    .interface-teacher-detail-show{
      position: absolute;
      right: 33px;
      transition: .3s;
      transform: rotate(180deg);
      z-index: 20;
      cursor: pointer;
      top: 0px;
      height: 82px;
      display: none;
      align-items: center;
      justify-content: center;
    }

    .interface-teacher-profile-content {
      width: 202px;
      height: 99px;
      border-radius: 2px;
      background-color: rgba(0,0,0,0.5);
      margin-bottom: 64px;
      margin-left: 44px;
    }

    .section-course_history-detail {
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      transition: .8s;
      margin-left: 2px;
    }

    .detail-nav {
      display: flex;
      align-items: center;
      height: 96px;
      justify-content: space-between;
    }

    .detail-nav h1 {
      margin-left: 71px;
    }

    .detail-nav-menu {
      display: flex;
      align-items: center;
      margin-right: 44px;
    }

    .detail-nav-menu-li {
      display: flex;
      margin-left: 15px;
      flex-direction: column;
      align-items: center;
    }

    .detail-nav-menu-img {
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: center;
    }

    .detail-nav-menu-img i {
      font-size: 21px;
    }


    .detail-nav-menu-title {
      margin-top: 6px;
      user-select: none;
    }

    .detail-nav-menu-li-active .detail-nav-menu-img{
      background: #67a1f9;
    }

    .detail-nav-menu-li-active .detail-nav-menu-img i,.detail-nav-menu-li-deactive .detail-nav-menu-img i{
      color: white;
    }

    .detail-nav-menu-li-deactive .detail-nav-menu-img{
      background: #dadada;
    }

    .detail-nav-menu-li-active .detail-nav-menu-title{
      color: #5E5E5E;
    }

    .detail-nav-menu-li-deactive .detail-nav-menu-title{
      color: #9A9A9A;
    }

  </style>
  <script type="module">
    import {VideoShare,ScreenShare,Videoleave,Screenleave} from './js/rtcToken.js'
    import { createHistoryWrap } from "./js/history.js";
    import { createFileWrap } from "./js/file.js";
    import { createMessageWrap } from "./js/message.js";
    // createHistoryWrap();
    $('.share-screen-text')[0].addEventListener('click',async (e) => {
      if(e.target.innerText === '共享屏幕'){
        await Videoleave()
        $('.interface-teacher-profile-content')[0].innerHTML = ''
        ScreenShare().then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
        e.target.innerText = '摄像头模式'
      }else{
        await Screenleave()
        $('.interface-teacher-profile-content')[0].innerHTML = ''
        VideoShare().then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
        e.target.innerText = '共享屏幕'
      }
    })

    VideoShare()
    createHistoryWrap();

    $('.detail-nav-cut')[0].addEventListener('click',async (e) => {
      requestAnimationFrame(() => {
        $('.section-course_history-detail')[0].style.position = 'absolute'
        $('.section-course_history-detail')[0].style.right = '0'
        $('.section-course_history-detail')[0].style.transform = 'translateX(2100px)'
        $('.section-interface')[0].style.width = '100%'
        $('.interface-teacher-detail-show').show()
        $('.interface-teacher-detail-show')[0].style.display = 'flex'
      })
    })

    $('.interface-teacher-detail-show')[0].addEventListener('click',async (e) => {
      $('.section-course_history-detail')[0].style.position = 'relative'
      $('.section-course_history-detail')[0].style.transform = 'translateX(0px)'
      $('.section-interface')[0].style.width = '50%'
      $('.interface-teacher-detail-show').hide()
    })

    let getCurrentCourseTitle = async () => {
      let res = await ajax('skill_query_name',{
        user_id : JSON.parse(localStorage.getItem('user')).user_id
      },'post')
      if(res.code === 200){
        $('.detail-nav-title')[0].innerHTML = `${res.data.name}的${res.data.language}课`
      }
      console.log(res,'getCurrentCourseTitle')
    } 

    getCurrentCourseTitle()
    $('.detail-nav-menu-li').each(function(index){
      $(this).on('click',function(e){
        Array.from($('.detail-nav-menu-li')).forEach(item => {
            if(item.dataset.index === this.dataset.index){
                item.className = 'detail-nav-menu-li detail-nav-menu-li-active'
            }else{
                item.className = 'detail-nav-menu-li detail-nav-menu-li-deactive'
            }
        })
        switch(this.dataset.index){
          case '1' : {createHistoryWrap()};break;
          case '2' : {createFileWrap()};break;
          case '3' : {createMessageWrap()};break;
        }
      })
    })
  </script>
</html>
